<template>
 
    <div class="container mx-auto max-w-screen-xl mt-5">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        
        <!-- 左侧主内容区域 -->
        <div class="lg:col-span-3">
            <!-- 文章列表 -->
            <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 gap-4">
    
    <div v-for="(article, index) in articles" :key="index"
        class="bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
        <a @click="goArticleDetail(article.id)" class="cursor-pointer">
            <img class="rounded-t-lg h-50 w-full" :src="article.titleImage" />
        </a>
        <div class="p-5">
            <!-- 标签 -->
            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags"
                :key="index"
                class="mb-3 inline-block bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300 dark:bg-green-900 dark:text-green-300">
                {{ item.name }}
            </div>
            <a @click="goArticleDetail(article.id)" class="cursor-pointer">
                <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{
                    article.title }}</h2>
            </a>
            <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">{{ article.description }}</p>
            <!-- meta 信息 -->
            <p class="text-gray-400 text-sm flex items-center article-mata">
                <svg class="inline w-3 h-3 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
            </svg>
            {{ article.createTime }}
    
            <svg class="inline w-3 h-3 ml-5 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
            </svg>
            <a @click="goCatagoryArticleListPage(article.category.id, article.category.name)"
                class="text-gray-400 hover:underline">{{ article.category.name }}</a>
            </p>
        </div>
    </div>
    </div>
    
    <!-- 分页 -->
    <nav aria-label="Page navigation example" v-if="total > 0">
    <ul class="flex items-center justify-center mt-10 mb-10 -space-x-px h-10 text-base">
        <li>
            <a v-if="current > 1" @click="getArticles(current - 1)"
                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">Previous</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" d="M5 1 1 5l4 4" />
                </svg>
            </a>
            <a v-else @click="getArticles(current)"
                class="cursor-not-allowed flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">Previous</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" d="M5 1 1 5l4 4" />
                </svg>
            </a>
        </li>
        <li v-for="page in pages" :key="page">
            <a @click="getArticles(page)"
                class="flex items-center border-gray-300 justify-center px-4 h-10 leading-tight bg-white border dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                :class="[page == current ? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500  hover:bg-gray-100 hover:text-gray-700']">
    
                {{ page }}
            </a>
        </li>
        <li>
            <a v-if="current < pages" @click="getArticles(current + 1)"
                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">Next</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" d="m1 9 4-4-4-4" />
                </svg>
            </a>
            <a v-else="current == pages" @click="getArticles(current)"
                class="cursor-not-allowed flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">Next</span>
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" d="m1 9 4-4-4-4" />
                </svg>
            </a>
        </li>
    </ul>
    </nav>
        </div>
    
        <!-- 右边栏 -->
        <div class="lg:col-span-1">
          <div class="sticky top-21">
            
          
          </div>
        </div>
      </div>
    </div>
    </template>
    
    
    <script setup>
    import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';
    import { getArticleDetail } from '@/service/api/frontend/article';
    import { getCategories } from '@/service/api/frontend/category';
    import { getTags } from '@/service/api/frontend/tag';
    import { useRoute, useRouter } from 'vue-router';
    import { reactive, ref } from 'vue';
    
    
    const router = useRouter()
    const route = useRoute()
    const article = reactive({
        title: '',
        content: '',
        updateTime: '',
        readNum: 0,
        categoryId: null,
        categoryName: '',
        preArticleId: null,
        preArticleTitle: '',
        nextArticleId: null,
        nextArticleTitle: '',
        tags: [],
    })
    
    function queryArticleDetail(articleId) {
        console.log('调用获取详情接口...' + route.query.articleId)
        getArticleDetail(articleId).then((e) => {
            article.title = e.data.title
            article.content = e.data.content
            article.updateTime = e.data.updateTime
            article.categoryId = e.data.categoryId
            article.categoryName = e.data.categoryName
            article.readNum = e.data.readNum
            article.tags = e.data.tags
            if (e.data.preArticle) {
                console.log('上一篇...')
                console.log(e.data.preArticle)
                article.preArticleId = e.data.preArticle.id
                article.preArticleTitle = e.data.preArticle.title
            } else {
                article.preArticleId = null
            }
    
            if (e.data.nextArticle) {
                article.nextArticleId = e.data.nextArticle.id
                article.nextArticleTitle = e.data.nextArticle.title
            } else {
                article.nextArticleId = null
            }
        })
    }
    queryArticleDetail(route.query.articleId);
    
    const goArticleDetail = (articleId) => {
        console.log('跳转详情页' + articleId)
        router.push({ path: '/article/detail', query: { articleId: articleId } })
        queryArticleDetail(articleId)
    }
    
    
    // 获取分类
    const categories = ref([])
    getCategories().then((e) => {
        console.log('获取分类数据')
        console.log(e)
        categories.value = e.data
    })
    
    
    // 获取标签
    const tags = ref([])
    getTags().then((e) => {
        console.log('获取标签数据')
        console.log(e)
        tags.value = e.data
    })
    
    const goCatagoryArticleListPage = (id, name) => {
        router.push({ path: '/category/list', query: { id: id, name: name } })
    }
    
    const goTagArticleListPage = (id, name) => {
        router.push({ path: '/tag/list', query: { id: id, name: name } })
    }
    
    </script>
    
    
    
    
    <style scoped>
    
    .header-banner {
      min-height: 160px;
    }
    .title {
        padding-bottom: 20px;
        margin-bottom: 0;
        line-height: 1.3;
        word-wrap: break-word;
        font-size: 32px;
        font-weight: 700;
        color: #292525;
    }
    
    .article-mata {
        margin-bottom: 20px;
    }
    
    :deep(pre) {
        background: #21252b;
        color: #f8f8f2;
        border-radius: 5px;
        padding: 10px 0 0;
        font-size: 17px;
        padding-left: 15px;
    }
    
    :deep(pre code.hljs) {
        display: block;
        overflow-x: auto;
        padding: 1em;
        padding-left: 0!important;
        padding-top: 25px!important;
    }
    
    :deep(pre:before) {
        background: #fc625d;
        border-radius: 50%;
        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        content: ' ';
        height: 10px;
        margin-top: 5px;
        position: absolute;
        width: 10px;
    }
    
    :deep(.article-content p) {
        letter-spacing: 0.3px;
        margin: 0 0 20px 0;
        line-height: 30px;
        color: #4c4e4d;
        font-weight: 400;
        word-break: normal;
        word-wrap: break-word;
        font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
    }
    
    :deep(.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6)  {
        margin: 30px 0 10px 0;
        color: #292525;
        line-height: 150%;
        font-family: PingFang SC,Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,"\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
    }
    
    :deep(.article-content h3) {
        font-size: 20px;
        margin-top: 40px;
        margin-bottom: 16px;
        font-weight: 600;
    }
    
    :deep(.image-caption) {
        min-width: 20%;
        max-width: 80%;
        min-height: 43px;
        display: block;
        padding: 10px;
        margin: 0 auto;
        /* border-bottom: 1px solid #eee; */
        font-size: 13px;
        color: #999;
        text-align: center;
    }
    
    :deep(code:not(pre code)) {
        padding: 2px 4px;
        margin: 0 2px;
        font-size: 95%!important;
        border-radius: 4px;
        color: rgb(41, 128, 185);
        background-color: rgba(27, 31, 35, 0.05);
        font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
    }
    
    :deep(pre code) {
        display: block;
        font-size: 95% !important;
        background-color: rgba(27, 31, 35, 0.05);
        font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
        /* color: #fff; */
    }
    
    :deep(article ul) {
        padding-left: 40px;
    }
    
    :deep(article ul li) {
        list-style-type: disc;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 16px;
    }
    
    
    
    :deep(blockquote) {
        /* margin: 20px 0; */
        border-left: 2.3px solid rgb(52, 152, 219);
        quotes: none;
        background: rgb(236, 240, 241);
        color: #777;
        font-size: 16px;
        /* padding: 10px 15px 10px 15px; */
        margin: 2em 0;
        padding: 24px 24px;
        position: relative;
    }
    
    :deep(blockquote p:last-child) {
        margin-bottom: 0;
    }
    
    :deep(table tr) {
        background-color: #fff;
        border-top: 1px solid #c6cbd1;
    }
    
    :deep(table) {
        border-collapse: collapse;
        margin-bottom: 1rem;
    }
    
    :deep(table th) {
        padding: 6px 13px;
        border: 1px solid #dfe2e5;
    }
    
    :deep(table td) {
        padding: 6px 13px;
        border: 1px solid #dfe2e5;
    }
    
    :deep(.article-content a) {
        color: #167bc2;
    }
    
    :deep(.article-content h2) {
        /* margin: 1em auto; */
        font-size: 22px;
        line-height: 1.5;
        font-weight: bold;
        font-synthesis: style;
        /* border-bottom: 1px solid rgba(0,0,0,.1); */
        padding-bottom: 16px;
        /* border-left: 3px solid #167bc2; */
        padding-bottom: 0;
        font-size: 24px;
        margin-top: 40px;
        margin-bottom: 26px;
        line-height: 140%;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 15px;
    }
    
    :deep(.article-content svg) {
        display: inline;
    }
    
    :deep(.article-content img) {
        position: relative;
        max-width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        cursor: -webkit-zoom-in;
        cursor: zoom-in;
    }
    
    :deep(strong) {
        color: rgb(52, 152, 219);
    }
    
    :deep(table tr:nth-child(2n)) {
        background-color: #f6f8fa;
    }
    
    .el-breadcrumb__inner a {
        font-weight: 400;
        color: #606266;
    }
    
    .el-breadcrumb__inner a:hover {
        font-weight: 400;
        color: #606266;
        text-decoration: underline;
    }
    
    .article-footer {
        border-top: 1px solid #e4e7ed;
        background-color: var(--el-fill-color-blank);
        justify-content: space-between;
        padding-top: 1rem;
    }
    
    .desc {
        display: block;
        font-size: 12px;
        color: rgba(60, 60, 60, .7);
        ;
    }
    
    .cursor-pointer {
        cursor: pointer;
    }
    
    .category-item:hover {
        text-decoration: underline;
        cursor: pointer;
    }
    
    .tag-item:hover {
        cursor: pointer;
    }
    
    .el-tag:hover {
        background-color: var(--el-color-info-light-8);
    }</style>